<template>
  <div class="student-dashboard">{{ flightsList }}{{ userFlights }}
    <!-- 标题与描述 -->
    <div class="header">
      <h2 class="title">学生数据中心</h2>
      <p class="subtitle">管理您的飞行训练和学习进度</p>
    </div>

    <!-- 外层栅格：控制卡片之间的布局 -->
    <el-row :gutter="16" class="stats-outer-row">
      <!-- 飞行时长卡片 -->
      <el-col :span="6">
        <el-card class="stat-card">
          <!-- 卡片内部栅格：控制文字和图标的布局 -->
          <el-row :gutter="8" class="stat-inner-row">
            <el-col :span="18" class="text-col">
              <div class="stat-label">飞行时长</div>
              <div class="stat-value">{{ stats.totalDuration }}小时</div>
            </el-col>
            <el-col :span="6" class="icon-col">
              <i class="el-icon-s-promotion stat-icon" style="color: #409eff;"></i>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <!-- 完成任务卡片 -->
      <el-col :span="6">
        <el-card class="stat-card">
          <el-row :gutter="8" class="stat-inner-row">
            <el-col :span="18" class="text-col">
              <div class="stat-label">完成任务</div>
              <div class="stat-value">8/10</div>
            </el-col>
            <el-col :span="6" class="icon-col">
              <i class="el-icon-check stat-icon" style="color: #67c23a;"></i>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <!-- 练习次数卡片 -->
      <el-col :span="6">
        <el-card class="stat-card">
          <el-row :gutter="8" class="stat-inner-row">
            <el-col :span="18" class="text-col">
              <div class="stat-label">练习次数</div>
              <div class="stat-value">{{ total }}次</div>
            </el-col>
            <el-col :span="6" class="icon-col">
              <i class="el-icon-refresh-right stat-icon" style="color: #e6a23c;"></i>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <!-- 平均分数卡片 -->
      <el-col :span="6">
        <el-card class="stat-card">
          <el-row :gutter="8" class="stat-inner-row">
            <el-col :span="18" class="text-col">
              <div class="stat-label">平均分数</div>
              <div class="stat-value">{{ stats.avgScore }}分</div>
            </el-col>
            <el-col :span="6" class="icon-col">
              <i class="el-icon-user stat-icon" style="color: #f56c6c;"></i>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷入口 -->
    <el-row :gutter="20" class="shortcut-row">
      <el-col :span="8">
        <el-card class="shortcut-card" @click.native="handleShortcut('air')">
          <div class="shortcut-item">
            <i class="el-icon-caret-right shortcut-icon"></i>
            <div class="shortcut-text">
              <h3>开始飞行训练</h3>
              <p>选择飞行场景，开始虚拟飞行训练</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="shortcut-card" @click.native="handleShortcut('task')">
          <div class="shortcut-item">
            <i class="el-icon-check shortcut-icon"></i>
            <div class="shortcut-text">
              <h3>查看任务</h3>
              <p>查看教师发布的训练任务和考核要求</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="shortcut-card" @click.native="handleShortcut('flights')">
          <div class="shortcut-item">
            <i class="el-icon-upload shortcut-icon"></i>
            <div class="shortcut-text">
              <h3>上传飞行记录</h3>
              <p>上传您的飞行数据，支持飞行复现</p>
            </div>
          </div>

        </el-card>
      </el-col>
    </el-row>

    <!-- 最近活动 -->
    <el-card class="activity-card">
      <div slot="header" class="activity-header">
        <span>最近活动</span>
        <span class="activity-desc">您的最新飞行训练记录</span>
      </div>
      <div class="activity-list">
        <el-card v-for="(item, index) in activities" :key="index" class="activity-item">
          <div class="activity-content">
            <span :class="`activity-badge activity-badge--${item.type}`"></span>
            <div class="activity-details">
              <p class="activity-title">{{ item.title }}</p>
              <p class="activity-meta">{{ item.meta }}</p>
            </div>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
// 引入 Element UI 组件
import {Card, Col, Row, TabPane, Tabs} from 'element-ui'
import {listFlights,} from "../api/flights/flights/flights.js";

export default {
  name: 'StudentDashboard',
  components: {
    ElTabs: Tabs,
    ElTabPane: TabPane,
    ElRow: Row,
    ElCol: Col,
    ElCard: Card
  },
  data() {
    return {
      activeTab: 'overview', // 当前激活的标签
      flightsList: [],
      userFlights: [0],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        record1: null,
        record2: null,
        name: null,
        distance: null,
        duration: null,
        taskId: null,
        score: null,
        userId: null
      },
      total: 0,
      stats: {
        totalDuration: 0,
        recordCount: 0,
        averageScore: 0
      },

      activities: [
        {
          type: 'success',
          title: '完成森林巡检任务',
          meta: '2小时前 · 得分: 92分'
        },
        {
          type: 'primary',
          title: '上传海域救援飞行记录',
          meta: '1天前 · 飞行时长: 15分钟'
        },
        {
          type: 'warning',
          title: '申请加入高级飞行班',
          meta: '3天前 · 状态: 待审核'
        }
      ]
    }
  },
  created() {
    this.getList();
    //this.search(  )
  },
  methods: {
    getList() {

      listFlights().then(response => {
        this.flightsList = response.rows;
        this.total = response.total;

      })
      this.userFlights = this.flightsList
      ;
      //筛选数据
// 查看某一项的 user_id 类型


    },
    search() {


      // this.userFlights = this.flightsList.filter(flights=> flights.user_id === 2004)
      //   console.log('用户2004飞行记录:',userFlights)
      if (userFlights.length === 0) {
        this.$message.info('该用户暂无飞行记录')
        // 重置统计数据
        this.stats = {
          totalDuration: 0,
          recordCount: 0,
          avgScore: 0
        }
        return
      }

      // 计算总飞行时间（秒转换为小时）
      const totalSeconds = userFlights.reduce((sum, flight) => {
        return sum + flight.duration
      }, 0)
      const totalHours = (totalSeconds / 3600).toFixed(2)

      // 计算飞行记录次数
      const recordCount = userFlights.length

      // 计算平均分
      const totalScore = userFlights.reduce((sum, flight) => {
        return sum + flight.score
      }, 0)
      const avgScore = (totalScore / recordCount).toFixed(1)

      // 存储统计结果
      this.stats = {
        totalDuration: totalHours,
        recordCount: recordCount,
        avgScore: avgScore
      }

      // 存储筛选后的记录，用于页面展示
      this.filteredFlights = userFlights

      // 控制台输出结果（调试用）
      console.log('用户2004飞行统计:', {
        总飞行时间: `${totalHours}小时`,
        飞行次数: `${recordCount}次`,
        平均得分: `${avgScore}分`,
        详细记录: userFlights
      })
    },
    handleShortcut(action) {

      // 快捷入口点击事件
      switch (action) {
        case 'air':
          this.$router.push('/air')
          this.$message('进入飞行训练场景选择');
          break;

        case 'task':
          // 跳转到任务列表页面（根据需求指定的路由）

          this.$router.push('/task')
          this.$message.success('进入任务列表')
          break
        case 'flights':
          this.$router.push('/flights')
          this.$message('进入飞行记录上传');
          break;
      }
    }
  }
}
</script>

<style scoped>
/* 整体容器 */
.student-dashboard {
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

/* 标题 */
.header {
  margin-bottom: 24px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 14px;
  color: #999;
}

/* 标签栏 */
.tabs {
  margin-bottom: 24px;
}


/* 统计卡片样式 */
/* 统计卡片外层栅格 */
.stats-outer-row {
  margin-bottom: 24px;
}

.stat-card {
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 16px;
  height: 100%;
}

/* 卡片内部栅格 */
.stat-inner-row {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

/* 文字区域列 */
.text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

/* 图标区域列 */
.icon-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.stat-icon {
  font-size: 28px;
}


/* 快捷入口 */
.shortcut-row {
  margin-bottom: 24px;
}

.shortcut-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.shortcut-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.shortcut-item {
  display: flex;
  align-items: center;
  padding: 20px;
}

.shortcut-icon {
  font-size: 24px;
  color: #409eff;
  margin-right: 12px;
}

.shortcut-text {
  display: flex;
  flex-direction: column;
}

.shortcut-text h3 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.shortcut-text p {
  font-size: 14px;
  color: #666;
}

/* 最近活动 */
.activity-card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
}

.activity-header span {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.activity-desc {
  font-size: 12px;
  color: #999;
}

.activity-list {
  padding: 12px;
}

.activity-item {
  border: none;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  background-color: #f8f9fb;
}

.activity-content {
  display: flex;
  align-items: center;
}

.activity-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.activity-badge--success {
  background-color: #67c23a;
}

.activity-badge--primary {
  background-color: #409eff;
}

.activity-badge--warning {
  background-color: #e6a23c;
}

.activity-details {
  display: flex;
  flex-direction: column;
}

.activity-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 2px;
}

.activity-meta {
  font-size: 12px;
  color: #999;
}
</style>
